<template>
  <view class="news-card" :class="{ 'top-news': news.isTop }">
    <!-- 置顶标识 -->
    <view class="top-tag" v-if="news.isTop">置顶</view>
    
    <!-- 新闻标题 -->
    <view class="news-title">{{ news.title }}</view>
    
    <!-- 辅助信息栏：报社、浏览量、评论数、时间 -->
    <view class="news-meta">
      <text class="meta-source">{{ news.source }}</text>
      <text class="meta-views">{{ news.views }}</text>
      <text class="meta-comments">{{ news.comments }} 评论</text>
      <text class="meta-time">{{ news.time }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "TopNewsCard",
  props: {
    news: {
      type: Object,
      required: true,
      // 定义新闻数据结构（包含新增的报社和评论数字段）
      default: () => ({
        title: "",
        source: "", // 报社/来源
        views: "", // 浏览量
        comments: "", // 评论数
        time: "",
        isTop: false
      })
    }
  }
};
</script>

<style scoped>
.news-card {
  padding: 20rpx;
  margin: 16rpx 0;
  border-radius: 8rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

/* 置顶新闻样式 */
.top-news {
  border-left: 6rpx solid #e63946;
}

.top-tag {
  display: inline-block;
  padding: 2rpx 10rpx;
  margin-bottom: 12rpx;
  font-size: 24rpx;
  color: #fff;
  background-color: #e63946;
  border-radius: 4rpx;
}

/* 标题样式 */
.news-title {
  font-size: 34rpx;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 16rpx;
  color: #1a1a1a;
}

/* 元信息栏样式 */
.news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 26rpx;
  color: #666;
  padding-top: 10rpx;
  border-top: 1px solid #f5f5f5;
}

.meta-source {
  color: #0066cc; /* 报社名称特殊颜色 */
}

.meta-views, .meta-comments {
  margin: 0 10rpx;
}

.meta-time {
  color: #999;
}
</style>